<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:45
 * @Description: 监测品种
-->
<template>
  <com-box :title="pieState.title">
    <template v-slot>
      <div class="jbqk">
        <div class="top">
          <div class="label">
            <p class="text">{{ pieState.subTitle }}</p>
            <p class="number">
              <number-scroll
                :number="pieState.num"
                :color="'#ffa811'"
                :fontSize="26"
              ></number-scroll>
              <span class="unit-orange">个</span>
            </p>
          </div>
          <charts :params="pieState.params"></charts>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
interface IState {
  title: string
  subTitle: string
  num: number
  dataClickIndex: any
  dataHoverIndex: any
  unit: string
  params: any
  getData: (adcode: string) => void
}
export default defineComponent({
  name: 'leftTop',
  props: {
    adcode: {
      type: String,
      default: '340000'
    }
  },
  components: {
    comBox,
    numberScroll
  },
  setup(props, { emit }) {
    const colorList = [
      '#20f7ff',
      '#ff712b',
      '#febe09',
      '#b45af3',
      '#67ff9a',
      '#fff100',
      '#0091ff',
      '#ff5ff0'
    ]
    // 轮播饼图
    const pieState: IState = reactive({
      title: '',
      subTitle: '',
      num: 0,
      dataClickIndex: null, //显示的高亮id
      dataHoverIndex: null, //显示的高亮id
      unit: '',
      params: {
        loading: true,
        chartInstance: null,
        height: '240px',
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          tooltip: {
            show: false
          },
          xAxis: [
            {
              show: false
            }
          ],
          yAxis: [
            {
              show: false
            }
          ],
          legend: {
            orient: 'vertical',
            top: '15%',
            right: '15%',
            data: [],
            itemWidth: 16,
            itemHeight: 8,
            itemGap: 14,
            textStyle: {
              fontSize: '15px'
            },
            selectedMode: false
          },
          series: [
            {
              type: 'pie',
              radius: ['55%', '80%'],
              center: ['35%', '50%'],
              label: {
                show: false,
                position: 'center',
                lineHeight: 24,
                color: '#00ffea',
                fontSize: '18px',
                formatter: (params: any) => {
                  return `${params.name}\n${params.percent.toFixed(0)}%`
                }
              },
              itemStyle: {
                color: (params: any) => {
                  return colorList[params.dataIndex]
                }
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            }
          ]
        },
        event: {
          click: (params: any) => {
            echartItem(pieState.dataClickIndex, params.dataIndex)
            pieState.dataClickIndex = params.dataIndex
            pieState.dataHoverIndex = params.dataIndex
            pieState.subTitle = params.data.name
            pieState.num = params.data.value
            emit('change', params.data.classId)
          },
          mouseover: (params: any) => {
            echartItem(pieState.dataHoverIndex, params.dataIndex)
            pieState.dataHoverIndex = params.dataIndex
          },
          mouseout: () => {
            echartItem(pieState.dataHoverIndex, pieState.dataClickIndex)
            pieState.dataHoverIndex = pieState.dataClickIndex
          },
          customEvent: (chartInstance: any) => {
            // 图表加载后 保存实例
            pieState.params.chartInstance = chartInstance
            setTimeout(() => {
              pieState.params.chartInstance.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: '0'
              })
              pieState.dataClickIndex = 0
              pieState.dataHoverIndex = 0
            })
          }
        }
      },
      getData: (adcode: string) => {
        pieState.params.loading = true
        httpRequest
          .get({ url: 'M2P2Spfl', params: { adcode: adcode } })
          .then((res) => {
            pieState.title = res.title
            pieState.unit = res.unit
            pieState.params.options.dataset.source = []
            res.data.forEach((item: any, index: number) => {
              if (index === 0) {
                pieState.num = item.value
                pieState.subTitle = item.name
                emit('change', item.classId)
              }
              // pieState.total += item.value
              let obj = {
                name: item.name,
                value: item.value,
                classId: item.classId,
                textStyle: {
                  color: colorList[index]
                }
              }
              pieState.params.options.dataset.source.push(obj)
            })
            pieState.params.options.legend.data =
              pieState.params.options.dataset.source
            pieState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const echartItem = (cancelItem: number, confirmItem: number) => {
      // 取消之前的高亮
      pieState.params.chartInstance.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: cancelItem
      })
      // 高亮当前项
      pieState.params.chartInstance.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: confirmItem
      })
    }
    pieState.getData(props.adcode)

    const refreshData = () => {
      pieState.getData(props.adcode)
    }

    return {
      pieState,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.jbqk {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 60px;
      line-height: 40px;
      margin-top: 20px;
      .text {
        font-size: 24px;
        color: #fdd931;
        font-family: 'AliHYAiHei';
      }
    }
  }
  .number {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .unit-orange {
      font-size: 24px;
      color: #ffa811;
      font-family: 'AliHYAiHei';
    }
    .unit-cyan {
      font-size: 24px;
      color: #3bfc99;
      font-family: 'AliHYAiHei';
    }
  }
}
</style>
